<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>20_选择器-优先级-基本选择器</title>

        <style>
            /* (1)当同一个选择器 同一个属性  我们重复写  那么下面的选择器
            会覆盖上面的选择器   后来者居上*/
            /* div {
                color: red;
            }

            div {
                color: green;
            } */

            /* (2) 通配符选择器 < 标签选择器 */

            /* div {
                color: green;
            }

            * {
                color: red;
            } */

            /* (3) 类选择器 > 标签选择器*/
            /* .d1 {
                color: cadetblue;
            }

            div {
                color: yellow;
            } */

            /* (4) id选择器 > 类选择器 */
            #dd {
                color: hotpink;
            }

            .d1 {
                color:yellow
            }

            /* 总结：基本选择器的优先级
              行内样式 > ID > 类 > 标签 > 通配符
            */
            
        </style>

    </head>
    <body>
        <div class="d1" id="dd" style="color: darkturquoise;">今晚的月色很美</div>
    </body>
</html>